<template>
    <div class="box">
        <div class="left">
            <div>
                <el-card class="box-card">
                    <div class="titile">
                        数据统计
                    </div>
                    <div class="text">
                        <div class="left1">
                            <span class="zou">
                                房间总数：
                                <span class="red">{{Countsdata.houses}}</span>
                            </span>
                            <span class="zou">
                                居民总数：
                                <span class="red">{{Countsdata.users}}</span>
                            </span>
                            <span class="zou">
                                商店总数：
                                <span class="red">{{Countsdata.stores}}</span>
                            </span>
                        </div>
                        <div class="right1">
                            <span class="you">
                                报修总数
                                <span class="red">{{Countsdata.repairs}}</span>
                                处
                            </span>
                            <span class="you">
                                投诉总数
                                <span class="red">{{Countsdata.questions}}</span>
                                次
                            </span>
                        </div>
                    </div>
                </el-card>
            </div>
            <div>
                <el-card class="box-card">
                    <div class="titile">
                        今日数据变动
                    </div>
                    <div class="text1">
                        <span class="zou">
                            新增维修:
                            <span class="red">{{Countsdata.todayRepairs}}</span>
                            处
                        </span>
                        <span class="zou">
                            未处理报修：
                            <span class="red">{{Countsdata.notFinishedRepairs}}</span>
                            处
                        </span>
                        <span class="zou">
                            新增投诉：
                            <span class="red">{{Countsdata.todayQuestions}}</span>
                            次
                        </span>
                        <span class="zou">
                            未处理投诉
                            <span class="red">{{Countsdata.notAnswer}}</span>
                            次
                        </span>
                    </div>
                </el-card>
            </div>
            <!-- 图表 -->
            <div class="btu">
                    <el-radio-group v-model="searchtiem" @change="getData" size="medium">
                        <el-radio-button :label="{ days: 30 }">最近30天</el-radio-button>
                        <el-radio-button :label="{ months: 6 }">最近半年</el-radio-button>
                        <el-radio-button :label="{ years: new Date().getFullYear() }">本年</el-radio-button>
                    </el-radio-group>
                </div>
            <div id="echarts" style="width: 100%; height: 400px;">

            </div>
        </div>
        <div class="right">
            <el-card class="box-card">
                <span>待投诉处理</span>
                <div v-for="(item,index) in Maintaindata.slice(0,5)" :key="index" class="text item">
                    <span>{{index+1}}、</span>
                    <span class="hidde">{{item.address}}</span>
                    <span>: {{item.content}}</span>
                </div>
            </el-card>
            <el-card class="box-card">
                <span>待维修处理</span>
                <div v-for="(item,index) in Questionsdata.slice(0,5)" :key="index" class="text item">
                    <span>{{index+1}}、</span>
                    <span class="hidde">{{item.address}}</span>
                    <span>: {{item.content}}</span>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { Counts, Maintain, Questions, repairsList, questionsList } from '@/api/welcome'
export default {
    data() {
        return {
            // 数据总数统计
            Countsdata: [],
            // 默认选中
            searchtiem: { days: 30 },
            // 维修管理列表
            Maintaindata: [],
            // 反馈问题列表
            Questionsdata: [],
            // 报修总数统计信息
            labels: [],

            questionsList: [],

            repairsList: []
        }
    },
    mounted() {
        this.getCounts()
        this.getMaintain()
        this.getQuestions()
        this.getEchartsData()
        this.createecharts()
    },
    methods: {
        async getEchartsData() {
            await this.getrepairsList()
            await this.getquestionsList()
            this.createecharts()
        },
        // 数据总数统计接口
        async getCounts() {
            let res = await Counts()
            // console.log(res);
            if (res.errCode == "10000") {
                this.Countsdata = res.data
            }
        },
        // 维修管理列表接口
        async getMaintain() {
            let res = await Maintain()
            // console.log(res);
            if (res.errCode == "10000") {
                this.Maintaindata = res.data.list
            }
        },
        // 反馈问题列表接口
        async getQuestions() {
            let res = await Questions()
            // console.log(res);
            if (res.errCode == "10000") {
                this.Questionsdata = res.data.list
            }
        },
        // 报修总数统计信息接口
        async getrepairsList() {
            let res = await repairsList(this.searchtiem)
            console.log(res);
            this.labels = res.data.map(item => item.label).join(",").split(",").reverse()
            this.repairsList = res.data.map(item => item.counts).join(",").split(",").reverse()
            if (this.searchtiem.years) {
                this.labels = this.labels.reverse()
                this.repairsList = this.repairsList.reverse()
            }

        },
        // 投诉总数统计信息接口
        async getquestionsList() {
            let res = await questionsList(this.searchtiem)
            this.labels = res.data.map(item => item.label).join(",").split(",").reverse()
            this.questionsList = res.data.map(item => item.counts).join(",").split(",").reverse()
            if (this.searchtiem.years) {
                this.labels = this.labels.reverse()
                this.questionsList = this.questionsList.reverse()
            }
        },
        getData(val) {
            this.searchtiem = val
            this.getEchartsData()

        },
        // 图表
        createecharts() {
            var myChart = echarts.init(document.getElementById('echarts'));
            // 绘制图表
            myChart.setOption({
                title: {
                    text: '数据展示'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['保修总数', '投诉总数',]
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.labels
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '保修总数',
                        type: 'line',
                        stack: 'Total',
                        data: this.repairsList,
                    },
                    {
                        name: '投诉总数',
                        type: 'line',
                        stack: 'Total',
                        data: this.questionsList
                    },
                ]
            });

        }
    }
}
</script>

<style lang="less" scoped>
    .btu {
    z-index: 10;
    margin-left: 78%;
    
}
.box {
    display: flex;
    justify-content: space-around;
    height: 100%;

    .left {
        width: 70%;
        height: 100%;
        // background-color: aqua;

        div {
            margin-bottom: 20px !important;
        }

        .titile {
            font-size: 16px;
            margin-bottom: 10px !important;
        }

        .text {
            border: 1px solid #ddd;
            height: 8vh;
            display: flex;
            justify-content: space-between;
            line-height: 8vh;
            font-size: 16px;
            box-sizing: border-box;
            padding: 0 40px;

            .red {
                color: red;
                font-size: 22px;
            }

            .left1 {
                display: flex;

                .zou {
                    margin-right: 30px;
                }

            }

            .right1 {
                .you {
                    margin-left: 40px;
                }
            }
        }

        .text1 {
            border: 1px solid #ddd;
            height: 8vh;
            line-height: 8vh;
            font-size: 16px;
            box-sizing: border-box;

            .red {
                color: red;
                font-size: 22px;
            }

            .zou {
                margin-right: 30px;
                margin-left: 35px;
            }
        }

        .item {
            padding: 18px 0;
        }

        .box-card {
            width: 100%;
            height: 18vh;

        }
    }

    .right {
        width: 25%;
        height: 100%;

        .text {
            font-size: 16px;
        }

        .item {
            padding: 9px 0;
            // height: 40px;
        }

        .box-card {
            margin-bottom: 20px;
            width: 100%;
        }

        .el-card__body>span {
            margin-bottom: 20px;
        }

        .hidde {
            color: cornflowerblue;
            cursor: pointer;
        }
    }
}
</style>